<template>
  <el-container class="setting_shopping-mall_inventory-set">
    <el-main>
      <div class="pos-machine-setting-list">
        <div class="pos-machine-setting-item">
          <ul class="infos mb10">
            <li>
              <P class="a-row" style="vertical-align: top;"><span><b>客户自动绑定说明：</b></span></P>
            </li>
            <li>
              <ul class="infos mb8">
                <li>
                  <P class="a-row"><span>1）什么是自动绑定：系统根据微信体系内用户的unionid唯一性，自动绑定本平台商城的客户和企业微信客户 </span></P>
                  <P class="a-row"><span>2）同一个用户在微信体系下unionid保证唯一性的前提：</span></P>
                  <P class="a-row" style="margin-left: 10px;"><span><b>条件① </b>必须绑定到同一个开放平台： 授权的小程序/公众号与企业微信授权的小程序/公众号，必须绑定到同一个微信开放平台。</span></P>
                  <P class="a-row" style="margin-left: 10px;"><span><b>条件② </b>必须是同一主体： 小程序/公众号的企业主体与企业微信的企业主体，必须相同</span></P>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="infos mb10">
            <li>
              <P class="a-row" style="vertical-align: top;"><span><b>特别说明：</b></span></P>
            </li>
            <li>
              <ul class="infos mb8">
                <li>
                  <P class="a-row"><span>1）由于客户unionID变更，如换绑微信开放平台账号，需客户重新登录小程序或在重新公众号授权头像昵称，系统才能获取到最新的unionID</span></P>
                  <P class="a-row"><span>2）若客户匿名下单，订单不返回unionId，将不能自动绑定，若出现不能绑定的情况请检测客户是否匿名下单</span></P>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="wrapper-box">
        <div class="dis">
          <div class="setting-content">
            <el-form ref="inventoryForm" :model="friendsBindingParams">
              <el-card shadow="never" class="cardInfo">
                <div class="dis al_item">
                  <div class="nav-item">
                    <div class="dis al_item dis_ju_spb item-header">
                      <div class="cursor flex_1 dis al_item">
                        <el-form-item class="person-center-form-item">
                          <span class="bg-white-panel">客户自动绑定功能：</span>
                          <el-switch
                            v-model="friendsBindingParams.settingBase.openAutoBinding"
                            :active-value="1"
                            :inactive-value="2"
                          />
                          <span class="form-item-title">  (开启后，每日1:00点对前一天还未绑定的用户unionid)</span>
                        </el-form-item>
                      </div>
                    </div>
                    <div class="dis al_item dis_ju_spb item-header" style="margin-top: 10px;">
                      <div class="cursor flex_1 dis al_item">
                        <el-form-item class="person-center-form-item" style="margin-left: 130px;">
                          <span class="form-item-title">备注手机号</span>
                          <el-switch
                            v-model="friendsBindingParams.settingBase.needMarkMobile"
                            :active-value="1"
                            :inactive-value="2"
                          />
                          <span class="form-item-title">(绑定成功后,如果商城中客户的手机号与企业微信的客户手机号不一致，自动备注手机号)</span>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-form>
          </div>
        </div>
      </div>
      <div class="btn-footer">
        <el-button>取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { friendsBindingSettingSave, friendsBindingSettingView } from '@/api/shoppingMall'
export default {
  components: {
  },
  data() {
    return {
      friendsBindingParams: {
        settingBase: {
          openAutoBinding: 1,
          needMarkMobile: 1
        }
      }
    }
  },
  created() {
    this.getFriendsBindingSettingInfo()
  },
  methods: {
    getFriendsBindingSettingInfo() {
      friendsBindingSettingView().then(res => {
        if (res) {
          if (res.code) {
            this.$message.error(`${res.msg}`)
          } else {
            this.friendsBindingParams.settingBase = res.settingBase == null ? this.friendsBindingParams.settingBase : res.settingBase
          }
        }
      })
    },
    submit() {
      this.$confirm('确认要修改配置?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        friendsBindingSettingSave(this.friendsBindingParams).then(res => {
          if (res) {
            this.$message.success('保存成功！')
            this.getFriendsBindingSettingInfo()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
  .setting_shopping-mall_inventory-set {
    background: #d8d8d8;
    padding: 4px;
    height: 90%;
    border-radius: 3px;
    overflow: auto;
    .clearfix{
      padding:5px;
      padding-top: 0;
      height: 15px;
      display: flex;
      align-items: center;
      >div {
        border: 0px solid #e6ebf5;
        flex-grow: 1;
        width:0;
        margin-right: 20px;
      }
    }
    .dialog-form{
      .el-form-item{
        margin-bottom: 10px !important;
        padding-right: 10px;
      }
    }
    }
      .pos-machine-setting-list {
        display: flex;
        align-items: left;
        width: calc(100%);
        overflow-x: hidden;
        height: 270px;
        margin-bottom: 1px;
        border: 1px solid #dddce2;
        .pos-machine-setting-img-item{
          margin-left: 20px;
          width: 100px;
          .item-img{
            border-radius: 4px;
            margin-top: 4px;
            img {
              width: 100px;
              height: 50px;
            }
          }
        }
        .pos-machine-setting-item {
          font-size: 16px;
          line-height: 20px;
          color: #3a3a3e;
          margin: 5px 1px 0;
          text-align: left;
          vertical-align: top;
          word-break: break-all;
          .infos {
            display:inline-block;
            text-align: left;
            line-height: 20px;
            margin-left: 40px;
            margin-top: 10px;
            justify-content: space-between;
            li {
              width: 100%;
              text-align: left;
              font-weight: 400;
              p {
                margin: 0;
                font-size: 14px;
                line-height: 25px;
                span {
                  display: inline-block;
                  width: 30%;
                }
              }
            }
          }
        }
        > div {
          margin-right: 5px;
          background: #ffffff;
          display: flex;
          flex-direction: column;
          padding: 5px 0 5px;
          width: 100%;
          justify-content: left;
          align-items: left;
          height: 100px;
          .item-name {
            font-size: 18px;
            margin-bottom: 3px;
          }
          .example {
            font-size: 12px;
            margin-bottom: 3px;
          }
          .desc {
            font-size: 12px;
            margin-bottom: 4px;
          }
        }
      }
    .setting-content {
      width: 100%;
      margin: 0px 0 4px 4px;
      overflow-x: hidden;
      overflow-y: auto;
      border-radius:5px;
      .cardInfo {
          margin-top: 2px;
          padding: 2px;
       }
      .user-center-item {
        box-sizing: border-box;
        cursor: pointer;
        padding-bottom: 10px;
        &.active {
          border: 1px solid #1890ff
        }
      }

    }
    .nav-item {
      font-size: 14px;
      background: #ffffff;
      border: 0px solid #e3e2e5;
      border-radius: 4px;
      margin-bottom: 10px;
      width: 100%;
      display: inline-block;

      &:nth-child(odd) {
        margin-right: 10px;
        font-size: 14px;
        color: #595961;
      }

      .item-header {
        border-radius: 4px 4px 0 0;
        height: 32px;
        line-height: 39px;
        padding: 0 10px 0 5px;
      }

      .item-content {
        padding: 5px 0;
      }
    }
    .person-center-form-item {
      font-size: 14px;
      margin-left: 20px;
      .el-form-item__label, .el-form-item__content, .el-radio__label, .el-button, .el-checkbox .el-checkbox__label {
        font-size: 13px;
      }
      .el-input-number.is-without-controls.el-input__inner{
        width: 20px;
        height: 14px;
      }
      .el-input.is-without-controls.el-input__inner{
        height: 14px;
      }
      .form-item-input{
        min-height: 14px;
        width: 350px;
        font-size: 12px;
      }
      .form-item-title{
        padding-left: 6px;
        padding-right: 6px;
        color: #666;
      }
      .info-setting {
        margin-left: 15px;
        color: #0000FF;
        text-align: right;
        cursor: hand;
      }
      .flex-just{
        vertical-align: middle;
        width: 80px;
      }
    }
    .base-info {
      display: flex;
      .basics-info {
        margin: 0 auto;
      }
    }
    .el-form-item  {
      margin-bottom: 30px;
    }
    .el-col {
      margin-bottom: 0px;
    }
    .noMargin {
      margin-bottom: 0 !important;
    }
  .bg-white-panel {
    padding: 5px;
    font-size: 14px;
    font-weight: bolder;
    border-radius: 4px;
    margin-bottom: 5px;
  }

</style>
